<template>
    <div id="logIn">
        <div class="top">
            <div class="content">
                <ul>
                    <li :class="active==0?'active':''" @click="tabs(0)">账号登录</li>
                    <li :class="active==1?'active':''" @click="tabs(1)">手机号快速登录</li>
                </ul>
                <ol>
                    <!-- 账号登录 -->
                    <li style="display: block;" v-if="active == 0">
                        <div class="accountLogin">
                            <div class="accountPassword">
                                <div>账号：</div>
                                <el-input v-model="accountNumberInput" placeholder="请输入手机号/邮箱"></el-input>
                            </div>
                            <div class="accountPassword">
                                <div>密码：</div>
                                <el-input v-model="passwordInput" placeholder="请输入您的密码"></el-input>
                            </div>
                            <div class="verification">
                                <div class="left">验证：</div>
                                <el-input v-model="VerificationInput" placeholder="请输入验证码"></el-input>
                                <div class="right">{{verificationCode}}</div>
                            </div>
                        </div>
                        <div class="go">
                            <div class="left" @click="register">没有账号去注册？</div>
                            <div class="right" @click="forgetPassword">忘记密码？</div>
                        </div>
                        <div class="immediatelyLogIn">立即登录</div>
                        <el-divider>快速登录</el-divider>
                        <div class="wechatLogIn"><img src="../image/weixindenhlu.png" alt=""></div>
                    </li>
                    <li v-if="active == 1">
                        <!-- 手机号快速登录 -->
                        <div class="phoneLogIn">
                            <div class="phoneNumber">
                                <div>手机号:</div>
                                <el-input v-model="phoneInput" placeholder="请输入手机号/邮箱"></el-input>
                            </div>
                            <div class="verification">
                                <div class="left">验证：</div>
                                <el-input v-model="phoneVerifyInput" placeholder="请输入验证码"></el-input>
                                <div class="right">{{phoneVerifyCode}}</div>
                            </div>
                            <div class="verificationCode">
                                <div class="left">验证码:</div>
                                <el-input v-model="phoneShortInput" placeholder="请输入短信验证码"></el-input>
                                <div class="sendCode" v-if="phoneTimeShow" @click="phoneSendCode">发送验证码</div>
                                <div class="anewSendCode" v-if="!phoneTimeShow" @click="phoneSendCode">重新发送（{{phoneTime}}）</div>
                            </div>
                        </div>
                        <div class="go">
                            <div class="left" @click="register">没有账号去注册？</div>
                            <div class="right" @click="forgetPassword">忘记密码？</div>
                        </div>
                        <div class="immediatelyLogIn">立即登录</div>
                        <el-divider>快速登录</el-divider>
                        <div class="wechatLogIn"><img src="../image/weixindenhlu.png" alt=""></div>
                    </li>
                </ol>
            </div>
        </div>
        <!-- 空白 -->
        <div class="null"></div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            active:0, // 切换选项卡
            // 账号登录
			accountNumberInput: "", // 输入的账号
            passwordInput: "", // 输入的密码
            VerificationInput: "", // 输入的验证码
            verificationCode: "3h6p", // 验证的图形码
            // 手机号快速登录
            phoneInput: "", // 输入的手机号
            phoneVerifyInput: "", // 输入的验证码
            phoneVerifyCode: "0813", // 验证的图形码
            phoneShortInput: "", // 输入的短信验证码
            phoneTime: 60,
            phoneTimeShow: true, // 控制验证码的显示隐藏
		};
	},
    mounted(){},
	methods: {
        // 切换选项卡
        tabs(index){
           this.active = index
        },
        // 手机号点击发送验证码
        phoneSendCode(){
			// console.log("手机号发送验证码")
            this.phoneTimeShow = false
            this.timer = setInterval(()=>{
                this.phoneTime--
                if(this.phoneTime === 0){
                    this.phoneTimeShow = true
                    clearInterval(this.timer)
                }
            },1000)
		},
		// 点击跳转到注册页面
		register(){
			// console.log("跳转到注册页面")
			this.$router.push("/register")
		},
		// 点击跳转到忘记密码页面
		forgetPassword(){
			// console.log("跳转到注册页面")
			this.$router.push("/forgetPassword")
		},
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #logIn{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .top{
            height: 800px;
            display: flex;
            align-items: center;
            background: url("../image/beijingtu.png") no-repeat;
            background-size: cover;
            .content{
                width: 25%;
                margin-left: 65%;
                border-radius: 20px;
                overflow: hidden;
                background: url("../image/background.png") no-repeat 100%;
                ul{
                    display: flex;
                    .active{
                        // background: url("../image/xuanzhong.png") no-repeat 100%;
                        background: #F29418;
                    }
                    li{
                        flex: 1;
                        line-height: 50px;
                        text-align: center;
                        font-size: 20px;
                        color: white;
                        background: url("../image/weixuanzhong.png") no-repeat 100%;
                    }
                }
                ol{
                    width: 100%;
                    li{
                        padding: 7%;
                        color: #666;
                        .accountLogin{ // 账号登录
                            // 账号、密码
                            .accountPassword{
                                margin-bottom: 5%;
                                font-size: 16px;
                                display: flex;
                                div{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 5;
                                }
                            }
                            // 验证
                            .verification{
                                margin-bottom: 5%;
                                font-size: 16px;
                                display: flex;
                                .left{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 3;
                                }
                                .right{
                                    margin-left: 3%;
                                    flex: 2;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    border: 1px dotted #ccc;
                                }
                            }
                        }
                        .phoneLogIn{ // 手机号快速登录
                            // 手机号
                            .phoneNumber{
                                margin-bottom: 5%;
                                font-size: 16px;
                                display: flex;
                                div{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 4;
                                }
                            }
                            // 验证
                            .verification{
                                margin-bottom: 5%;
                                font-size: 16px;
                                display: flex;
                                .left{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 2;
                                }
                                .right{
                                    margin-left: 3%;
                                    flex: 2;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    border: 1px dotted #ccc;
                                }
                            }
                            // 验证码
                            .verificationCode{
                                margin-bottom: 5%;
                                font-size: 16px;
                                display: flex;
                                .left{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 2;
                                }
                                .sendCode{
                                    margin-left: 3%;
                                    flex: 2;
                                    text-align: center;
                                    line-height: 40px;
                                    font-size: 16px;
                                    color: white;
                                    background: #F29418;
                                }
                                .anewSendCode{
                                    margin-left: 3%;
                                    flex: 2;
                                    text-align: center;
                                    line-height: 40px;
                                    font-size: 16px;
                                    color: white;
                                    background: url("../image/weixuanzhong.png") no-repeat 100%;
                                }
                            }
                        }
                        // 去注册、忘记密码
                        .go{
                            display: flex;
                            .left{
                                flex: 1;
                                color: #F29418;
                            }
                            .right{
                                flex: 1;
                                text-align: right;
                            }
                        }
                        // 立即登录按钮
                        .immediatelyLogIn{
                            width: 100%;
                            text-align: center;
                            line-height: 50px;
                            font-size: 18px;
                            color: white;
                            margin: 5% 0%;
                            background: #F29418;
                        }
                        // 分割线
                        .el-divider{
                            margin: 10% 0%;
                            color: #666;
                        }
                        // 微信登录
                        .wechatLogIn{
                            display: flex;
                            justify-content: center;
                            img{
                                width: 50px;
                                height: 50px;
                            }
                        }
                    }
                }
            }
        }
        .null{
            width: 100%;
            height: 104px;
            background: white;
            position: absolute;
            bottom: -13%;
            left: 0%;
        }
    }
}



@media screen and (max-width: 1400px){    
    #logIn{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .top{
            height: 750px;
            display: flex;
            align-items: center;
            background: url("../image/beijingtu.png") no-repeat;
            background-size: cover;
            .content{
                width: 23%;
                margin-left: 62%;
                border-radius: 20px;
                overflow: hidden;
                background: url("../image/background.png") no-repeat 100%;
                ul{
                    display: flex;
                    .active{
                        // background: url("../image/xuanzhong.png") no-repeat 100%;
                        background: #F29418;
                    }
                    li{
                        flex: 1;
                        line-height: 36px;
                        text-align: center;
                        font-size: 16px;
                        color: white;
                        background: url("../image/weixuanzhong.png") no-repeat 100%;
                    }
                }
                ol{
                    width: 100%;
                    li{
                        padding: 5%;
                        color: #666;
                        .accountLogin{ // 账号登录
                            // 账号、密码
                            .accountPassword{
                                margin-bottom: 3%;
                                font-size: 14px;
                                display: flex;
                                div{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 5;
                                }
                            }
                            // 验证
                            .verification{
                                margin-bottom: 3%;
                                font-size: 14px;
                                display: flex;
                                .left{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 3;
                                }
                                .right{
                                    margin-left: 3%;
                                    flex: 2;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    border: 1px dotted #ccc;
                                }
                            }
                        }
                        .phoneLogIn{ // 手机号快速登录
                            // 手机号
                            .phoneNumber{
                                margin-bottom: 3%;
                                font-size: 14px;
                                display: flex;
                                div{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 4;
                                }
                            }
                            // 验证
                            .verification{
                                margin-bottom: 3%;
                                font-size: 14px;
                                display: flex;
                                .left{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 2;
                                }
                                .right{
                                    margin-left: 2%;
                                    flex: 2;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    border: 1px dotted #ccc;
                                }
                            }
                            // 验证码
                            .verificationCode{
                                margin-bottom: 3%;
                                font-size: 14px;
                                display: flex;
                                .left{
                                    flex: 1;
                                    display: flex;
                                    align-items: center;
                                }
                                .el-input{
                                    flex: 2;
                                }
                                .sendCode{
                                    margin-left: 2%;
                                    flex: 2;
                                    text-align: center;
                                    line-height: 40px;
                                    font-size: 14px;
                                    color: white;
                                    background: #F29418;
                                }
                                .anewSendCode{
                                    margin-left: 3%;
                                    flex: 2;
                                    text-align: center;
                                    line-height: 40px;
                                    font-size: 14px;
                                    color: white;
                                    background: url("../image/weixuanzhong.png") no-repeat 100%;
                                }
                            }
                        }
                        // 去注册、忘记密码
                        .go{
                            display: flex;
                            .left{
                                flex: 1;
                                color: #F29418;
                            }
                            .right{
                                flex: 1;
                                text-align: right;
                            }
                        }
                        // 立即登录按钮
                        .immediatelyLogIn{
                            width: 100%;
                            text-align: center;
                            line-height: 40px;
                            font-size: 16px;
                            color: white;
                            margin: 3% 0%;
                            background: #F29418;
                        }
                        // 分割线
                        .el-divider{
                            margin: 8% 0%;
                            color: #666;
                        }
                        // 微信登录
                        .wechatLogIn{
                            display: flex;
                            justify-content: center;
                            img{
                                width: 40px;
                                height: 40px;
                            }
                        }
                    }
                }
            }
        }
        .null{
            width: 100%;
            height: 98px;
            background: white;
            position: absolute;
            bottom: -13%;
            left: 0%;
        }
    }
}
</style>